<template>
  <div class="home">
    <el-row>
      <el-col :span="4">
        <h1 style="color:#fff;font-size:24px;background:#00b5fa;text-align:left;padding-left:35px;font-weight:500;line-height:50px;">数据分析系统</h1>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#444c63"
          active-text-color="#409EFF"
          :router='true'
          :default-active="$route.path" 
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-download"></i>
              <span>数据挖掘</span>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="/dataAnalysis">数据分析</el-menu-item>
              <el-menu-item index="/heimage">数据爬取</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-data-analysis"></i>
              <span>探索性数据分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/userComment">用户评论表</el-menu-item>
              <el-menu-item index="/dataAnalysis">star分布图</el-menu-item>
              <el-menu-item index="/heimage">star集中分布图</el-menu-item>
              <el-menu-item index="/weekhourComment">各星期的小时评论数分布图</el-menu-item>
              <el-menu-item index="/longshortComment">评论数的长短分布图</el-menu-item>
              <el-menu-item index="/wordCloud">词云图</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-headset"></i>
              <span>情感分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/userComment1">数据分析</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>

      <!-- 右侧 -->
      <el-col  :span="20">
        <div class="rightSide">
          <div class="avator">
             <span>管理员</span>
             <el-avatar shape="circle" :size="50" fit="cover" :src="require('../assets/avator.jpg')"></el-avatar>
            
             <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-caret-bottom" style="font-size:18px;"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="exit">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <router-view></router-view>
      </el-col>
    </el-row>

    <!-- <el-row :gutter="20">
      <el-col :span="6" align="center"
        ><el-button type="primary" @click="execl('python test.py')"
          >爬取数据</el-button
        ></el-col
      >
      <el-col :span="6" align="center">
        <el-button type="primary">样本分析</el-button>
        <div class="sample" id="sample"></div>
      </el-col>
      <el-col :span="6" align="center"
        ><el-button type="primary">词云分析</el-button></el-col
      >
      <el-col :span="6" align="center">数据展示</el-col>
    </el-row> -->
  </div>
</template>

<script>
import echarts from "echarts";
import {
  Button,
  Row,
  Col,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Avatar,
  Dropdown,
  DropdownMenu,
  DropdownItem
} from "element-ui";
export default {
  components: {
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,
    [Menu.name]: Menu,
    [Submenu.name]: Submenu,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup,
    [Avatar.name]: Avatar,
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data() {
    return {
      samples: [],
    };
  },
  mounted() {
    // this.getSamplesDistribution();
    
  },
  methods: {
    exit(){
      this.$message({
        type:'success',
        message:'退出成功'
      })
      this.$router.push('/login');
    },
    handleOpen() {},
    handleClose() {},

    // 得到样本分布图
    getSamplesDistribution() {
      let sampleDom = echarts.init(document.getElementById("sample"));
      let option = {
        xAxis: {
          type: "category",
          data: [
            "0.5",
            "1.0",
            "1.5",
            "2.0",
            "2.5",
            "3.0",
            "3.5",
            "4.0",
            "4.5",
            "5.0",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [500, 200, 250, 400, 500, 2800, 4000, 12000, 8000, 9000],
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#FC8D52",
                    "#5D9CEC",
                    "#64BD3D",
                    "#EE9201",
                    "#29AAE3",
                    "#B74AE5",
                    "#0AAF9F",
                    "#E89589",
                    "#16A085",
                    "#4A235A",
                    "#C39BD3 ",
                    "#F9E79F",
                    "#BA4A00",
                    "#ECF0F1",
                    "#616A6B",
                    "#EAF2F8",
                    "#4A235A",
                    "#3498DB",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      };
      sampleDom.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  // .el-row {
  //   margin: 0 !important;
  //   height: 500px;
  //   background: #ccc;
  // }
  .rightSide {
    height: 50px !important;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    .avator{
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 30px;
      .el-avatar{
        margin-left: 15px;
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
  .el-row {
    height: calc(100% - 50px) !important;
    /deep/ .el-col{
      height: 100%;
    }
    /deep/ .el-menu{
       height: 100%;
    }
    /deep/ .el-submenu__title{
       span{
         color:#f9feff;
      } 
    }
    li{
      color:#a3a4a6;
    }
    .el-menu /deep/ .el-submenu__title:hover{
       span{
         color:#666;
      }
    }
  }
  #sample {
    width: 500px;
    height: 400px;
    // background: red;#444c63 #8891a2 
  }
}
</style>